import React, { useEffect, useRef } from 'react';
import Map from './Map';
import ReactDOM from 'react-dom';
import  './index.less';
import { getCurrentUser } from '@/utils/authority';
import scenicIcon from '@/assets/scenic-icon.png';


const MapBox: React.FC<any> = ({ ...props }) => {
  const zoneCode = getCurrentUser().zoneCode
  const mapConfig: any = {
    parentFeatureOptions: {
      strokeColor: '#2cb9ff', //线颜色
      strokeWeight: 3, //线宽
    },
    subFeaturesOptions: {
      fillColor: 'rgba(33, 255, 203, 0.1)', //填充色
      fillOpacity: 0.1,
      strokeColor: '#2cb9ff', //线颜色
      strokeWeight: 1, //线宽
    },
    nameMarker: {
      style: {
        fillColor: 'rgba(255,255,255, 1)',
        fontSize: 18,
        fontWeight: '600',
      },
    },
    mapStatus: {
      dragEnable: false,
      zoomEnable: false,
    },
    // active:{
    //   enable:true,
    // },
    tipMarker:{
      enable: true,
      // offset(){
      //   return []
      // },
      formatter(props:any){
            return <div className={'mapBox'}>
              <div>{props.name}</div>

            </div>

      }
    },
    ...props.mapConfig
  };
  const { list, scenicClick } = props;
  const mapRef = useRef<any>();
  const tipWrapperRef = useRef<any>();
  const tipMarkerRef = useRef<any>();
  const onLoad = (baseMapInstance: any) => {
    mapRef.current = baseMapInstance.map;
    drawMarker(list);
    drawTipMarker();
  };
  const drawMarker = (data: any) => {
    const list: any = data ? data : [];
  console.log('list',list)
    const markerList: any = [];
    if (!(list && list.length && mapRef.current)) {
      return false;
    }
    list.forEach((item: any) => {
      if (!(item.lng && item.lat)) {
        return false;
      }
      const markerItem: any = new window.AMap.Marker({
        position: [item.lng, item.lat],
        content: `<img style="width:24px" src="${scenicIcon}"/>`,
        anchor: 'bottom',
        offset: new window.AMap.Pixel(-12, -29),
        bubble: true,
        zIndex: 10,
      });
      markerItem.on('click', (e: any) => {
        markerHandleClick(e, item);
      });
      markerItem.on('mousemove', (e: any) => {
        markerHandleMove(e, item);
      });
      markerItem.on('mouseover', (e: any) => {
        markerHandleOver(e, item);
      });
      markerItem.on('mouseout', (e: any) => {
        markerHandleMouseOut();
      });

      markerList.push(markerItem);
    });
    mapRef.current.add(markerList);
  };
  const drawTipMarker = () => {
    const wrapper = document.createElement('div');
    tipWrapperRef.current = wrapper;
    const markerItem: any = new window.AMap.Marker({
      content: wrapper,
      anchor: 'bottom',
      offset: new window.AMap.Pixel(-105, -90),
      bubble: true,
      zIndex: 10,
    });
    tipMarkerRef.current = markerItem;
    markerItem.hide();
    mapRef.current.add(markerItem);
  };
  const markerHandleClick = (e: any, item: any) => {
    scenicClick(item);
  };
  const markerHandleOver = (e: any, item: any) => {
    console.log('item',item)
    const markerWrapper = tipWrapperRef.current;
    ReactDOM.render(
      <div className={'map-scenic-box'}>
        <div className={'map-scenic-name'}>{item.name}</div>
        <div>
          <div className={'map-scenic-analysis-item'}>
            实时游客量：
            <span style={{ color: '#4BF3FF', fontFamily: 'var(--fontFa)' }}>
              {item.passenger}
            </span>{' '}
            人
          </div>
          <div className={'map-scenic-analysis-item'}>
            网络口碑：
            <span style={{ color: '#FEA11E', fontFamily: 'var(--fontFa)' }}>
              {item.comment}
            </span>{' '}
            分
          </div>
        </div>
      </div>,
      markerWrapper,
    );
  };
  const markerHandleMove = (e: any, item: any) => {
    const markerItem = tipMarkerRef.current;
    markerItem.setPosition([e.lnglat.lng, e.lnglat.lat]);
    markerItem.show();
  };
  const markerHandleMouseOut = () => {
    tipMarkerRef.current.hide();
  };

  return (
    <Map
      className={'map-box'}
      // zoneCode={zoneCode.substr(0, 6)}
      zoneCode={'430100'}
      onLoad={onLoad}
      config={mapConfig}
    />
  );
};

export default MapBox;
